<template>
  <dtDialog
    title="新增业务系统"
    :visible.sync="dialogVisible"
    :lock-scroll="false"
    :append-to-body="true"
    :is-loading="loading"
    @closeDialog="onModalClosed"
    @comfirmBtn="onSubmit()"
  >
    <el-form
      ref="form"
      slot="content"
      label-width="90px"
      :model="form"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="业务系统" prop="systemName">
            <el-select v-model.trim="form.systemName" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="(item) in appList"
                :key="item.appId"
                :label="item.appName"
                :value="item.appName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dtDialog>
</template>

<script>
import { getApplist, addPaySystem } from '@/api/unifiedPayment/businessSystem'

export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        systemName: ''
      },
      rules: {
        systemName: [{ required: true, message: '请选择上游系统名称', trigger: ['change'] }]
      },
      loading: false,
      appList: []
    }
  },
  mounted() {
    getApplist().then((res) => {
      this.appList = res.data
    })
  },
  methods: {
    onModalClosed() {
      this.initModal()
    },
    initModal() {
      this.$refs.form.resetFields()
    },
    onSubmit() {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.loading = true
          addPaySystem(this.form).then((res) => {
            this.$dtModal.msgSuccess(res.message)
            this.$emit('success')
            this.dialogVisible = false
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    open(row) {
      this.form = { ...row }
      this.dialogVisible = true
    }
  }
}
</script>

<style>

</style>
